<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>风景宜人管理后台</title>
    <meta name="keywords" content="微信">
    <meta name="description" content="风景宜人管理后台">
    {!!Html::style('/adminv/css/bootstrap.min.css')!!}
    <link href="/adminv/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Morris -->
    <link href="/adminv/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/adminv/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="/adminv/css/animate.css" rel="stylesheet">
    <link href="/adminv/css/style.css" rel="stylesheet">
    <link href="/layer/skin/layer.css" rel="stylesheet">
    <link href="/layer/skin/layer.ext.css" rel="stylesheet">
    <style>
        div.selected .selected_mask {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        div.selected .selected_mask_inner {
            width: 118px;
            height: 118px;
            -moz-opacity: .6;
            -khtml-opacity: .6;
            opacity: .6;
            background-color: #000;
            filter: alpha(opacity=60);
        }

        div.selected .selected_mask_icon {
            position: absolute;
            top: 0;
            left: 0;
            background: transparent url(/image/icon_card_selected.png) no-repeat 0 0;
            width: 117px;
            height: 117px;
            vertical-align: middle;
            display: inline-block;
            background-position: 50% 50%;
        }
    </style>
</head>

<body>
<div id="wrapper">


    <div class="row">

        <div class="col-lg-12">
            <div class="wrapper wrapper-content animated fadeInRight" id="pjax_load">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>图库列表
                                    <small></small>
                                </h5>

                            </div>
                            <div class="ibox-content">
                                @foreach($mediaList as $media)
                                <div style="position: relative;display: inline-block">
                                    <a class="fancybox" href="javascript:void(0);" title="">
                                        <img alt="image" data-mediaid="{{$media->media_id}}" style="height: 117px;width: 117px;" class='tupian'
                                             src="{{$media->weixinurl}}">
                                    </a>

                                    <div class="selected_mask">
                                        <div class="selected_mask_inner"></div>
                                        <div class="selected_mask_icon"></div>
                                    </div>
                                </div>
                                @endforeach

                                <div class="hr-line-dashed"></div>

                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <button class="btn btn-primary submitmenu comfirm" type="submit">确定</button>
                                        <button class="btn btn-white cancel" type="submit">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>


    </div>


</div>
<!-- Mainly scripts -->
<script src="/adminv/js/jquery-2.1.1.min.js"></script>
<script src="/adminv/js/bootstrap.min.js@v=3.4.0"></script>
<script src="/adminv/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/adminv/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!---->
<!--<!-- Custom and plugin javascript -->
<script src="/adminv/js/hplus.js@v=2.2.0"></script>
<script src="/adminv/js/plugins/pace/pace.min.js"></script>
<script type="text/javascript" src="/adminv/js/jquery.pjax.js"></script>
<script src="/js/nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/layer/layer.js"></script>
<script type="text/javascript" src="/layer/extend/layer.ext.js"></script>

<script>
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

    // 选中
    $('.tupian').on('click', function () {
        var $this_pic = $(this).parent().parent();
        $this_pic.addClass('selected');

        // 其他同位元素去掉选中效果
        $this_pic.siblings().removeClass('selected');
    });

    // 取消
    $('.selected_mask').on('click', function () {
        $(this).parent().removeClass('selected');
    });

    $('.cancel').on('click', function () {
        parent.layer.close(index);

    });

    // 点击确定
    $('.comfirm').on('click', function() {
        // 确定有图片被选中
        $checked = $('.ibox-content').children().hasClass('selected');
        if($checked) {

            // 隐藏图文
            parent.$('.news').hide();
            // 隐藏文本
            parent.$('.replywenben').hide();
            // 类型为image
            parent.$('.type').val('image');
            $mediaid = $('.selected').find('img').data('mediaid');
            $picurl = $('.selected').find('img').attr('src');
            parent.$('.uploadpic').show();
            parent.$('.uploadpic').attr('data-mediaid', $mediaid);
            parent.$('.uploadpic').attr('src', $picurl);

            // 关闭窗口
            parent.layer.close(index);
        }else {
            parent.layer.msg('必须选中一个哦', {shade: 0.3})
        }
    });
</script>
</body>

</html>
